<template>
    <div class="app-container">
        <div class="layout-content">
            <transition :name="animation">
                <router-view class="routerView"></router-view>
            </transition>
        </div>
        <div class="layout-footer">
            <TabBar :data="tabbars" @change="handleChange" />
        </div>
    </div>
</template>
  
<script>
import TabBar from '@/components/TabBar'
export default {
    name: 'AppLayout',
    data() {
        return {
            animation: 'slide-left',
            tabbars: [
                {
                    title: '首页',
                    to: {
                        name: 'Index'
                    },
                    icon: {
                        active: require("@/assets/theme-img/home-active.png"),
                        inactive: require("@/assets/theme-img/home.png"),
                    }
                },
                {
                    title: '课程',
                    to: {
                        name: 'Course'
                    },
                    icon: {
                        active: require("@/assets/theme-img/course-active.png"),
                        inactive: require("@/assets/theme-img/course.png"),
                    }
                },
                {
                    title: '约课记录',
                    to: {
                        name: 'Record'
                    },
                    icon: {
                        active: require("@/assets/theme-img/study-active.png"),
                        inactive: require("@/assets/theme-img/study.png"),
                    }
                },
                {
                    title: '练习',
                    to: {
                        name: 'Practice'
                    },
                    icon: {
                        active: require("@/assets/theme-img/course-active.png"),
                        inactive: require("@/assets/theme-img/course.png"),
                    }
                },
                {
                    title: '我的',
                    to: {
                        name: 'Main'
                    },
                    icon: {
                        active: require("@/assets/theme-img/user-active.png"),
                        inactive: require("@/assets/theme-img/user.png"),
                    }
                }
            ]
        }
    },
    watch: {
        $route(to) {
            console.log(to)
            if (to.meta.tier != 1) {
                this.animation = 'slide-left'
            } else {
                this.animation = 'slide-right'
            }
        }
    },
    components: {
        TabBar
    },
    methods: {
        handleChange(v) {
            // console.log('tab value:', v)
        }
    }
}
</script>
<style lang="scss" scoped>
.routerView {
    position: absolute;
    left: 0;
    top: 0;
}

//左滑动画和右滑动画
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
    transition: all 2s ease;
    position: absolute;
}

.slide-left-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}

.slide-left-leave-to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.slide-right-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.slide-right-leave-to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
</style>